<template>
  <div>
    <img src="../assets/logo.png">
    <el-row class="content">
      <el-col :xs="24" :sm="{span: 6,offset: 9}">
        <span class="title">
        欢迎注册
        </span>
        <el-row>
          <el-input
            v-model="account.userName"
            placeholder="请输入账号名"
            type="text">
          </el-input>
          <el-input
            v-model="account.password"
            placeholder="请输入密码"
            type="password"
            @keyup.enter.native="signUp">
          </el-input>
          <el-button type="primary" @click="signUp">注册</el-button>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import UserDataMixin from './UserDataMixin';

export default {
  // data () {
  //   return {
  //     account: {
  //       userName: '',
  //       password: '',
  //     },
  //   };
  // },
  mixins: [UserDataMixin],
  methods: {
    signUp() {
      const data = JSON.parse(JSON.stringify(this.account));

      this.$http.post('/auth/users', data)
        .then((res) => {
          if(res.data.status == 0){
            this.$message({
              type: 'success',
              message: '注册成功，请登录。',
            });
            setTimeout(() => {
              this.$router.replace({ name: 'Login' });
            }, 500);
          }else{
            this.$message.error(res.data.msg);
          }
        }, (err) => {
            this.$message.error('请求错误！');
        });
    },
  },
  created() {
    console.log('This is from Signup.');
  },
};
</script>

<style lang="stylus" scoped>
  .el-row.content
    padding 16px
  .title
    font-size 28px
  .el-input
    margin 12px 0
  .el-button
    width 100%
    margin-top 12px
</style>
